<!-- /components/custom-countdown/custom-countdown.vue -->
<!-- /components/custom-countdown/custom-countdown.vue -->
<template>
	<view class="uni-countdown">
		<text v-if="showDay" :style="[timeStyle]" class="uni-countdown__number">
			{{ d }}
		</text>
		<text
			v-if="showDay"
			:style="[splitorStyle]"
			class="uni-countdown__splitor"
		>
			{{ dayText }}
		</text>
		<text
			v-if="showHour"
			:style="[timeStyle]"
			class="uni-countdown__number"
		>
			{{ h }}
		</text>
		<text
			v-if="showHour"
			:style="[splitorStyle]"
			class="uni-countdown__splitor"
		>
			{{ showColon ? ':' : hourText }}
		</text>
		<text
			v-if="showMiniute"
			:style="[timeStyle]"
			class="uni-countdown__number"
		>
			{{ i }}
		</text>
		<text
			v-if="showMiniute"
			:style="[splitorStyle]"
			class="uni-countdown__splitor"
		>
			{{ showColon ? ':' : minuteText }}
		</text>
		<text :style="[timeStyle]" class="uni-countdown__number">{{ s }}</text>
		<text
			v-if="!showColon"
			:style="[splitorStyle]"
			class="uni-countdown__splitor"
		>
			{{ secondText }}
		</text>
	</view>
</template>
<script>
	import { initVueI18n } from '@dcloudio/uni-i18n'
	import messages from './i18n/index.js'
	const { t } = initVueI18n(messages)
	export default {
		name: 'UniCountdown',
		emits: ['timeup'],
		props: {
			showDay: {
				type: Boolean,
				default: true,
			},
			// *********
			showHour: {
				type: Boolean,
				default: true,
			},
			showMiniute: {
				type: Boolean,
				default: true,
			},
			// *********
		},
	}
</script>

<style lang="scss" scoped>
	$font-size: 14px;

	.uni-countdown {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		&__splitor {
			margin: 0 2px;
			font-size: $font-size;
			color: #333;
		}

		&__number {
			border-radius: 3px;
			text-align: center;
			font-size: $font-size;
		}
	}
</style>
